<template>
    <div class="top-info">
        <div class="top" v-if="weatherInfo">
            <div>
                <el-dropdown @command="handleCommand" trigger="click">
                    <span class="el-dropdown-link">
                        <p>{{weatherInfo.name}}&nbsp;<el-link type="info" >切换</el-link></p>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  disabled>切换城市</el-dropdown-item>
                        <el-dropdown-item v-for="item in cities" :key="item.code" :command="item.cityname">{{item.cityname}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <p><el-link target="_blank" :href="weatherInfo.sevenDWeather">七日天气</el-link></p>
            </div>
            <div>
                <p>
                    今{{weatherInfo.today_tianqi}}{{weatherInfo.today_wendu}}
                </p>
                <p>
                    明{{weatherInfo.tomorrow_tianqi}}{{weatherInfo.tomorrow_wendu}}
                </p>
            </div>
            <div>
                <p>
                    {{weatherInfo.date}}
                    {{weatherInfo.datenl}}
                </p>
                <p>
                    {{weatherInfo.dayofweek}}
                </p>
            </div>
        </div>

        <div class="bottom">
            <div v-for="(itemArr, index) in linkInfo" :key="index">
                <p v-for="item in itemArr" :key="item.name" class="point">
                    <el-link target="_blank" :href="item.url">{{item.name}}</el-link>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
import arr from '../mixins/arr'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
    head: {
    },
    mixins:[arr],
    props:{
        city: {
            type: Object,
            default: () => ({}),
        },
    },
    components: { 

    },
    data: () => ({
        linkInfo:[],
    }),
    computed: {
        ...mapGetters({
            cities: 'city/getCities',
            weatherInfo: 'city/getWeatherInfo',
        }),
    },
    methods: {
        ...mapActions({
            queryCity: 'city/queryCities',
            queryWeather: 'city/queryWeather',
        }),
        ...mapMutations({
            updateUsersCityName: "city/updateUsersCityName",
        }),
        handleCommand(command){
            this.updateUsersCityName(command);
            
            this.queryWeather({
                city: command,
            });
        },
        /**
         * 获取 火车票、查航班等链接
         */
        getTopnavigate(){
            this.$get(`${this.$store.state.api.tbUrl}/home/gettopnavigate.json`, data => {
                let resArr = [];
                resArr = this.splitArray(data,2);
                this.linkInfo = resArr;
            });
        },
    },
    mounted() {
        this.getTopnavigate();

        this.queryCity();
        this.queryWeather();
    },
    beforeDestroy() {

    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss'; 
    .top-info{

        line-height: 28px;
        font-size: 12px;
        padding:10px;

        p {
            color: #606266;
            font-size: 12px;
        }
        .el-link {
            font-size: 12px;
        }
        .top{
            display: flex;
            width: 100%;
            flex-wrap:wrap;
            justify-content:space-between;
            background-color: #edf1ff;
            padding: 2px 10px;
            p{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 30px;
            }
        }

        .bottom{
            display: flex;
            width: 100%;
            flex-wrap:wrap;
            justify-content:space-between;
            align-content:flex-start;
            margin-top: 2px;
            padding: 0px 14px;
        }

        .point{
            position: relative;
        }
        .point::after {
            position: absolute;
            left: -10px;
            top: 13px;
            border: solid transparent;
            content: "";
            height: 5px;
            width: 5px;
            pointer-events: none;
            border-radius: 50%;
            background-color: #d8d8d8;
        }

    }
     


</style>
 